<template>
  <uni-popup ref="popup" type="bottom">
    <view class="selection">
      <view class="text">选择预计送达时间</view>
      <view class="center">
        <picker-view :value="valueNum" @change="bindChange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item,index) in list" :key="index">{{item}}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in 24" :key="index">
              <text v-if="index<10">{{'0'+`${index}`}}</text>
              <text v-if="index>9">{{index}}</text>
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item,index) in 60" :key="index">
              <text v-if="index<10">{{'0'+`${index}`}}</text>
              <text v-if="index>9">{{index}}</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
      <view class="center lis" style="justify-content: space-around;">
        <view @click="submit(1)">取消</view>
        <view @click="submit(2)">确认</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { format, addDays } from 'date-fns';
  const emit = defineEmits(['confirm']);
  const popup = ref(null)
  const valueNum = ref([0]);
  const list = ref(['今日', '明日'])
  const today = ref()
  const tomorrow = ref()
  function init() {
    var now = new Date();
    valueNum.value = [0, now.getHours(), now.getMinutes()]
    today.value = format(now, 'yyyy-MM-dd')
    let dateTime = new Date(today.value);
    tomorrow.value = format(addDays(dateTime, 1), "yyyy-MM-dd");
    open()
  }
  function bindChange(e : any) {
    console.log(e.detail.value)
    valueNum.value = e.detail.value
  }
  function submit(num : number) {
    console.log(num)
    switch (num) {
      case 1:
        close()
        break;
      case 2:
        console.log(valueNum.value)
        const year = valueNum.value[0] === 0 ? today.value : tomorrow.value
        const hours = valueNum.value[1]
        const minutes = valueNum.value[2]
        const times = year + ' ' + hours + ':' + minutes
        emit('confirm', times);
        close()
        break;
    }
  }
  function open() {
    popup.value.open()
  }
  function close() {
    popup.value.close();
  }
  defineExpose({
    open,
    close,
    init,
  });
</script>

<style scoped lang="less">
  .selection {
    width: 100%;
    width: 100%;
    background: #fff;
    border-radius: 10px 10px 0px 0px;

    .text {
      width: 100%;
      text-align: center;
      padding: 15rpx;
      box-sizing: border-box;
    }
  }

  .picker-view {
    width: 100%;
    height: 40vh;
  }

  .item {
    line-height: 100rpx;
    text-align: center;
  }

  .lis {
    view {
      width: 240rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      border-radius: 5px;
      margin-top: 15rpx;
    }

    view:nth-of-type(1) {
      border: 1px solid #558AF1;
      color: #558AF1;
      box-sizing: border-box;
    }

    view:nth-of-type(2) {
      background: #558AF1;
      color: #fff;
    }
  }
</style>
<style>
  .picker-view>>>.uni-picker-view-indicator {
    height: 100rpx !important;
  }
</style>